<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<style>
    .gauge {
        width: 230px;
        margin: auto;
        height: 230px;
        border: solid 1px gray;
        padding: 5px;
    }
</style>

<body>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-sm12 layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">垃圾箱实时温湿度</div>
                    <div class="layui-card-body" style="min-height: 280px;">
                        <div id="gauge1" class="gauge"></div>

                    </div>
                </div>
            </div>
            <div class="layui-col-sm12 layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">位置信息</div>
                    <div class="layui-card-body" style="min-height: 280px;">
                        <!-- <div id="main2" class="layui-col-sm12" style="height: 300px;"></div> -->
                        <div id="allmap" style="height:300px"></div>

                    </div>
                </div>
            </div>
            <div class="layui-col-sm12 layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">分类统计</div>
                    <div class="layui-card-body" style="min-height: 280px;">
                        <div id="main3" class="layui-col-sm12" style="height: 300px;"></div>

                    </div>
                </div>
            </div>
            <div class="layui-col-sm12 layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">垃圾桶使用量</div>
                    <div class="layui-card-body" style="min-height: 280px;">
                        <div id="main4" class="layui-col-sm12" style="height: 300px;"></div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

    <!-- <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script> -->
    <script src="https://cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script>
    <script type="text/javascript"
        src="https://api.map.baidu.com/api?v=2.0&ak=0NALIoVw7xmacSguGmUSxG9hVMRTYbSE"></script>
    <script src="TempGas.js"></script>

    <script type="text/javascript">

        setInterval(function () {
            let random = (Math.random() * 60).toFixed(2) - 0;
            Gauge.Hygrothermograph('gauge1', random, random);
        }, 2000);

        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }

        var initPoint = new BMap.Point(118.578054, 24.810421);
        var bm = new BMap.Map("allmap");
        var marker = new BMap.Marker(new BMap.Point(118.578054, 24.810421));
        bm.centerAndZoom(initPoint, 12);
        bm.addControl(new BMap.NavigationControl());

        var myChart = echarts.init(document.getElementById('main3'));

        // 指定图表的配置项和数据
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br />{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['可回收垃圾', '其他垃圾', '厨余垃圾', '有害垃圾']
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        { value: 335, name: '有害垃圾' },
                        { value: 310, name: '厨余垃圾' },
                        { value: 234, name: '可回收垃圾' },
                        { value: 135, name: '其他垃圾' }
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        var initPoint = new BMap.Point(118.578054, 24.810421);
        var bm = new BMap.Map("allmap");
        var marker = new BMap.Marker(new BMap.Point(118.578054, 24.810421));
        bm.centerAndZoom(initPoint, 12);
        bm.addControl(new BMap.NavigationControl());

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        var myChart = echarts.init(document.getElementById('main4'));

        // 指定图表的配置项和数据
        var option = {
            tooltip: {
                formatter: "{a} <br />{b} : {c}%"
            },
            series: [
                {
                    name: '垃圾桶使用量',
                    type: 'gauge',
                    detail: { formatter: '{value}%' },
                    data: [{ value: 88, name: '已使用' }]
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
</body>

</html>